/*
 * @Author: chenhuan 2218981866@qq.com
 * @Date: 2022-11-19 09:04:41
 * @LastEditors: chenhuan 2218981866@qq.com
 * @LastEditTime: 2022-11-21 20:28:12
 * @FilePath: \上课项目练习\111\react-menus-mangener\src\views\AppPayOff\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { FC } from 'react'
import { 
  Select, Table, Switch, Button 
} from 'antd'
import styled from 'styled-components'
import nanoid from 'nanoid'

const PayOff = styled.div`
  width: 1000px;
  height: 100%;
  padding: 10px 50px 20px 50px;
`
const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
}
interface DataType {
  key: React.Key;
  name: string;
  status: string;
}
const columns = [
  {
    title: '支付方式',
    dataIndex: 'name',
    key: 'name',
    width: 530,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 530,
  },
]

const data = [
  {
    name: '支付宝（官方支付宝支付，需自行开通)',
    key: 1,
    status: <Switch defaultChecked onChange={onChange} className="pay-switch" />,
  },
  {
    name: '支付宝（官方支付宝支付，需自行开通)',
    key: 2,
    status: <Switch defaultChecked onChange={onChange} className="pay-switch" />,
  },
  {
    name: '银行卡',
    key: 3,
    status: <Switch defaultChecked onChange={onChange} className="pay-switch" />,
  },
  {
    name: '储值卡',
    key: 4,
    status: <Switch defaultChecked onChange={onChange} className="pay-switch" />,
  },
  {
    name: '积分支付',
    key: 5,
    status: <Switch defaultChecked onChange={onChange} className="pay-switch" />,
  },
]

const AppPayOff: FC = () => {
  return (
    <PayOff>
      <div className='styled-profile-contenier'>
        <Select className='select-member'
              style={{ width: 200 }}
              placeholder="全部门店"
              optionFilterProp="children"
              options={[
                {
                  value: '1',
                  label: '全部门店',
                },
                {
                  value: '2',
                  label: '山里人家(天河店)',
                },
                {
                  value: '3',
                  label: '山里人家(越秀店)',
                },
                {
                  value: '4',
                  label: '山里人家(海珠店)',
                },        
          ]}
        />
        <Button type="primary" danger className='query-member'>查询</Button>
      </div >
      <Table columns={columns} dataSource={data} pagination={false} bordered className='table'/>
    </PayOff>
  )
}
 
export default AppPayOff